<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- <h1>商品创建</h1> -->
        <qf-nav-bar 
            :left-arrow="true"
            title="商品创建"
            @click-left="clickLeftFn"
            @click-right="clickRightFn">
            
        </qf-nav-bar>
    
        <h1>表单组件</h1>
        <qf-table1 :state="false" ref="a"></qf-table1>
        <qf-table1 :state="false" ref="b"></qf-table1>
        <qf-table1 :state="true" ref="c"></qf-table1>
        <qf-table1 :state="true" ref="d"></qf-table1>
    
        <hr>
    
        <button @click="submitFn">表单组件外面的按钮,点击请求接口</button>
    
        <hr>
    
        <h1>按钮组件</h1>
        <!-- <qf-button type="primary" content="主要按钮"></qf-button>
        <qf-button type="default" content="默认按钮"></qf-button>
        <qf-button type="info" content="信息按钮"></qf-button> -->
            <!-- 换成插槽slot 这样按钮中可以放图标 -->
        <qf-button type="primary" >主要按钮😃</qf-button>
        <qf-button type="default" >默认按钮😊</qf-button>
        <qf-button type="info" >信息按钮</qf-button>
    
        <hr>
    
        <h1>loading1组件</h1>
        <qf-loading1 :state="loading1State"></qf-loading1>
        <button @click="loading1State=true">显示loading</button>
        <button @click="loading1State=false">隐藏loading</button>
        
        <hr>
    
        <h1>loading2组件</h1>
        <!-- <qf-loading2 :state="loading2State" @close="data=>loading2State=data"></qf-loading2> -->
        <!-- <qf-loading2 :state="loading2State" @update:state="data=>loading2State=data"></qf-loading2> -->
        <qf-loading2 :state.sync="loading2State"></qf-loading2>
        <button @click="loading2State=true">显示Loading</button>
        <!-- <button @click="loading2State=false">隐藏Loading</button> -->
    
        <hr>
    
        <h1>dialog组件</h1>
        <qf-dialog :visible.sync="dialogState" title="dialog" content="xxx内容"></qf-dialog>
        <button @click="dialogState=true">显示对话框</button>
    
        <hr>
    
        <h1>分页组件page</h1>
        <qf-page :total="11" :page-size="2"  @click-page="clickPageFn"></qf-page>
    
        <hr>
    
        <h1>表格iview table组件</h1>
        <qf-table :columns="usersColumns" :data="usersData"></qf-table>
        <qf-table :columns="goodsColumns" :data="goodsData"></qf-table>
        
        <hr>

        <h1>elementui table组件</h1>
        <qf-table3 :data="tableData">
            <qf-table-column prop="id" label="编号"></qf-table-column>
            <qf-table-column prop="name" label="姓名"></qf-table-column>
            <qf-table-column prop="age" label="年龄"></qf-table-column>
            <qf-table-column label="性别">
              <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
            </qf-table-column>
        </qf-table3>
    </div>
    <link rel="stylesheet" href="./qfui.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./qfui.js"></script>
    <script>
    const vm = new Vue({
        el: "#root",
        data: {
            loading1State:true,
            loading2State:false,
            dialogState:false,
    
            //用户表格
            usersColumns:[   //一个对象代表一列
                {title:"编号",key:"id"},
                {title:"姓名",key:"uname"},
                {title:"性别",key:"sex",render:row=>`<b>${row.sex===1?'男':'女'}</b>`},
            ],
            usersData:[      //一个对象代表一行
                {id:1,uname:'张三',sex:1},
                {id:2,uname:'李四',sex:2},
               
            ],
            //商品表格
            goodsColumns:[
                {title:"编号",key:"id"},
                {title:"商品名称",key:"title"},
                {title:"商品价格",key:"price"},
            ],
            goodsData:[
                {id:1,title:'商品1',price:1.11},
                {id:2,title:'商品2',price:2.22},
                {id:3,title:'商品3',price:3.33},
            ],

            tableData: [
                { id: 1, name: "张三", age: 3, sex: 1 },
                { id: 2, name: "赵四", age: 18, sex: 2 },
                { id: 3, name: "王五", age: 32, sex: 2 },
            ],
        },
        methods:{
            submitFn(){
                console.log(this.$refs.a.formData); //a这个组件实例
                console.log(this.$refs.b.formData); //b这个组件实例
                alert('商品创建请求接口');
            },
            clickLeftFn(){
                alert('clickLeftFn')
            },
            clickRightFn(){
                alert('clickRightFn')
            },
            clickPageFn(data){
                console.log('你点击了第'+data+'页');
            }
            
        },
    })
    </script>
</body>
</html>